<template>
    <div class="canvas-container">
        <div class="h-300px w-full">
            <canvas id="lefttop"> </canvas>
        </div>
        <div id="weightTags" class="hidden"></div>
    </div>

</template>
<script setup>
import { onMounted, ref, onUnmounted } from 'vue';
import './tagcanvas.min.js';

const updateFlag = ref(false);

// 词云图初始化
const initWordCloud = () => {
    let o = {
        maxSpeed: 0.04, // 添加最大的运动速度
        minSpeed: 0.02, // 添加最小的运动速度这样就可以保证一直运动，不会停止
        textHeight: 16,
        outlineMethod: 'colour', // tag hover 之后的 轮廓效果
        fadeIn: 500,
        outlineColour: '##0000FF',
        textColour: null,
        outlineOffset: 0,
        depth: 0.99,
        minBrightness: 0.2,
        wheelZoom: false,
        reverse: true, // 运动方向与鼠标移动方向相反
        // shadowBlur: 1,
        shuffleTags: true,
        shadowBlur: 0.9, // 将阴影模糊设置为0，去除阴影效果
        shadowOffset: [0, 0],
        stretchX: 1.4, // Stretch or compress the cloud horizontally. 水平拉伸词云
        stretchY: 0.9,//竖直拉伸词云图
        initial: [0.1, 0.1], // 给词云添加一个初始的运动方向
        // textFont: null, // 字体设置为 null 就会继承 每个 tag的a 标签的字体
        weight: true, // weight 打开，就可以根据默认的字体的大小作为权重，对tag 的样式进行调整
        weightMode: 'size', // 样式调整的方式
        weightSize: 0.7, // 调整 tag 字体的大小，加个 权重
    };

    try {
        // 如果不是更新，说明是第一次渲染，就启动 tagcanvas, 否则就代表更新
        if (!updateFlag.value) {
            window.TagCanvas.Start('lefttop', 'weightTags', o);
            updateFlag.value = true;
        } else {
            window.TagCanvas.Update('lefttop');
        }
    } catch (e) {
        console.error(e);
    }
};


const createTagListDom = (res) => {
    let fragment = new DocumentFragment();

    for (let i = 0; i < res.length; i++) {
        let a = document.createElement('a');

        // 字符串长度大于10就要换行
        if (res[i].word.length > 10) {
            let charArr = res[i].word.split('');

            charArr.splice(10, 0, '<br>');
            res[i].word = charArr.join('');
        }
        //颜色的设计
        a.style.color=getRandomColor();

        a.innerHTML = res[i].word;
        a.href = 'javascript:void(0)';

    

        fragment.append(a);
    }

    // 更新 tagContainer中的 tag元素
    let tagsContainer = document.querySelector('#weightTags');

    tagsContainer.innerHTML = '';
    tagsContainer.append(fragment);

    initWordCloud();
};


//添加的颜色
function getRandomColor(){
     var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
const onResize = () => {
    initWordCloud(); // 重新初始化词云以适应新尺寸
};
onMounted(() => {
    // 初始化时调用一次
    initWordCloud();
    // 添加窗口大小变化的监听器
    window.addEventListener('resize', onResize);
    createTagListDom([
        {
            id: 1,
            word: '万里',
            isActive: false,
           
        },
        {
            id: 2,
            word: '回首',
            isActive: false,
        },
        {
            id: 3,
            word: '不可',
            isActive: false,
        },
        {
            id: 4,
            word: '乾坤',
            isActive: false,
        },
        {
            id: 5,
            word: '风尘',
            isActive: false,
        },
        {
            id: 6,
            word: '天下',
            isActive: false,
        },
        {
            id: 7,
            word: '故人',
            isActive: false,
        },
        {
            id: 8,
            word: '不知',
            isActive: false,
        },
        {
            id: 9,
            word: '天子',
            isActive: false,
        },
        {
            id: 10,
            word: '呜呼',
            isActive: false,
        },
        {
            id: 11,
            word: '朝廷',
            isActive: false,
        },
        {
            id: 12,
            word: '不敢',
            isActive: false,
        },
        {
            id: 13,
            word: '白头',
            isActive: false,
        },
        {
            id: 14,
            word: '将军',
            isActive: false,
        },
        {
            id: 15,
            word: '今日',
            isActive: false,
        },
        {
            id: 16,
            word: '干戈',
            isActive: false,
        },
        {
            id: 17,
            word: '何时',
            isActive: false,
        },
        {
            id: 18,
            word: '巫峡',
            isActive: false,
        },
        {
            id: 19,
            word: '江湖',
            isActive: false,
        },
        {
            id: 20,
            word: '何处',
            isActive: false,
        },
        {
            id: 21,
            word: '萧萧',
            isActive: false,
        },
        {
            id: 22,
            word: '不见',
            isActive: false,
        },
        {
            id: 23,
            word: '不得',
            isActive: false,
        },
    ]);
});
onUnmounted(() => {
    // 移除窗口大小变化的监听器
    window.removeEventListener('resize', onResize);
});
</script>

<style  scoped>
#canvas-container {
   /*  position: relative; */
    width: 600px;
    padding-bottom: 100px;/*宽高比*/
 } 
#lefttop {
    /* position: absolute;
    top:90%;
    left: 0; */
    width: 100%;
    height:350px;

}

</style>
